.user-windows,
.user-window-portal,
.user-windows-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

// Prevent React Portal from blocking pointer events
.user-window-portal {
    pointer-events: none;
}

.user-windows {
    pointer-events: none;

    &.is-grid {
        pointer-events: all;
        background-color: rgba(0, 0, 0, .95);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .window {
            display: flex;
            flex: 0 1 25%;
        }
    }
}

.user-windows-mask {
    pointer-events: all;
    z-index: 999999;
}

.user-windows.is-hovering>.user-windows-mask {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.user-windows.is-grid[data-size="1"]>.window {
    flex: 0 1 100%;
}

.user-windows.is-grid[data-size="2"]>.window,
.user-windows.is-grid[data-size="3"]>.window,
.user-windows.is-grid[data-size="4"]>.window {
    flex: 0 1 50%;
}

.user-windows.is-grid[data-size="5"]>.window,
.user-windows.is-grid[data-size="6"]>.window,
.user-windows.is-grid[data-size="7"]>.window,
.user-windows.is-grid[data-size="8"]>.window,
.user-windows.is-grid[data-size="9"]>.window {
    flex: 0 1 33.333333%;
}
